<template>
<div class="top">
    <!-- 面包屑 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>全部商品</el-breadcrumb-item>
  <el-breadcrumb-item>分类</el-breadcrumb-item>
</el-breadcrumb>
     
<div class="nav">
    <div class="f">分类</div>
    <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane v-for="(item,index) in tab" :label="item.category_name" @click="dianji(item.category_name)" :key="index" :name="item.id"></el-tab-pane>
  </el-tabs> -->
  <ul>
    <li @click="quanbu('quanbu')">全部</li>
    <li v-for="(item,index) in tab" :key="index" @click="quanbu(item.category_id)">{{item.category_name}}</li>
  </ul>
 </div>
        
    <div class="fd">   
        <el-col :span="6.8" v-for="(item,index) in list" :key="index">
            <el-card shadow="hover" class="sp">
            <div class="m" @click="tiao(item.product_id)">
                <img :src="`http://101.132.181.9:3000/${item.product_picture}`" style="width:100%;height:100%">
            </div>
            <p>{{item.product_name}}</p>
            <p>{{item.product_title}}</p>
            <p>
              <span style="color:red">{{item.product_selling_price}}</span>
            <span class="span1">{{item.product_price}}</span>

            </p>
            
       </el-card>
  </el-col>
    <div class="fy">
              <el-pagination
                    background
                     layout="prev, pager, next"
                     :current-page="arr.currentPage"
                     @current-change="zzz"
                     :page-size="15"
                :total="total">
            </el-pagination>
    </div>
    </div>
  </div>  
</template>
<script>
import { shangpin, spfenl, shoppingdan, fen ,search} from "@/api/api.js";
export default {
  data() {
    return {
      ssname: this.$route.query.search,
      arr: {search:'', categoryID: [], currentPage: 1, pageSize: 15 },
      list: [],
      activeName: "0",
      total: 15,
      tab: [],
      // ssss: {
      //   //搜索
      //  search:'',
      //   currentPage: 1,
      //   pageSize: 15
      // },
      zxc: [],
      a:[]
    };
  },
  created() {
    //钩子函数实例创建之后
    
    this.xuan();
    this.sou();
    // console.log(this.ssname);
  },
  methods: {
    //方法
    sou() {
      this.arr.search=this.ssname
      search(this.arr).then(res => {
        console.log(res);
        if(this.arr.search==""){
          this.xuan()
        }else{
           this.a= res.data.Product;
        }
       
      });
    },

    tiao(id) {
      this.$router.push({
        name: "xiangq",
        params: {
          id: id
        }
      });
      // console.log(id);
    },
    xuan() {
      spfenl(this.arr).then(res => {
        // console.log("res", res);
        this.list = res.data.Product;
           this.a = res.data.Product;
        this.total = res.data.total;
      });
      shangpin().then(res => {
        this.tab = res.data.category;
        // console.log(this.tab);
      });
    },
    //分页
    zzz(val) {
      // console.log(val);
      this.arr.currentPage = val;
      this.xuan();
    },
    // dianji(name) {
    //   console.log(name);
    //   shoppingdan(name).then(res => {
    //     console.log(res);
    //     this.list=res.data.Product
    //   });
    // },
    quanbu(i) {
      console.log(i);
      this.arr.categoryID = i;
      if (i == "quanbu") {
        this.xuan();
      } else {
        fen(this.arr).then(res => {
          this.list = res.data.Product;
          this.total = res.data.total;
        });
        this.list = this.zxc.filter(item => {
          return item.category_id == i.category_id;
        });
      }
    }
  },
  components: {
    //注册子组件
  },
  watch: {
    //监听
  }
};
</script>
<style lang="scss" scoped>
.top {
  width: 1070px;
  margin: 0 auto;
  margin-top: 30px;
}
.fd {
  .fy {
    position: absolute;
    bottom: 0;
    left: 400px;
  }
  text-align: center;
  position: relative;
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  //   background-color: red;
  //   display: flex;
  .sp {
    //   flex-wrap: wrap;
    margin-bottom: 30px;
    width: 200px;
    height: 280px;
    margin-right: 12px;
  }
  .m {
    width: 80%;
    height: 120px;
    margin: 0 auto;
    background-color: blue;
  }
  p {
    padding-top: 15px;
    span {
      margin-right: 20px;
    }
    .span1 {
      text-decoration: line-through;
    }
  }
}
.nav {
  width: 1070px;
  height: 50px;
  display: flex;
  // margin: 0 auto;
  .f {
    width: 80px;
    line-height: 50px;
    text-align: center;
    height: 50px;
    border: 1px solid #ccc;
  }
  ul {
    width: 700px;
    height: 50px;
    display: flex;
    justify-content: space-between;

    li {
      width: 80px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 50px;
      font-size: 18px;
    }
  }
}
</style>